<script lang="tsx" setup>
import { ref } from 'vue'
import { SuitTable, SuitTableColumnCtx } from '@suit/front-base-components-v3'
import { TableColumnCtx } from 'element-plus';

interface TableDataItem {
  label: string;
  label1: string;
    label2: string;
    label3: string;
    label4: string;
}
const columns = ref<SuitTableColumnCtx<TableDataItem>[]>([
  {
    label: 'label111',
    prop: 'label1',
    
  },
  {
    label: 'label22222',
    prop: 'label2',
  },
  {
    label: 'label34444',
    prop: 'label3',
    renderHeader:()=>{
      return <div> render Header11111</div>
    },
    render:(info)=>{
      return <div>body 22222{info.row.label}</div>
    }
  },
  {
    label: 'label6664',
    prop: 'label4',
  },
])

const data = ref([
  {
    label: 'labelxxxxxx1',
    label1: 'label1',
    label2: 'label2',
    label3: 'label3',
    label4: 'label11',
  },
  {
    label: 'label1',
    label1: 'label1',
    label2: 'label2',
    label3: 'label3',
    label4: 'label11',
  },

  {
    label: 'label1',
    label1: 'label1',
    label2: 'label2',
    label3: 'label3',
    label4: 'label11',
  },

  {
    label: 'label1',
    label1: 'label1',
    label2: 'label2',
    label3: 'label3',
    label4: 'label11',
  },

  {
    label: 'label12222',
    label1: 'label1',
    label2: 'label2',
    label3: 'label3',
    label4: 'label11',
  },

  {
    label: 'label1',
    label1: 'label1',
    label2: 'label2',
    label3: 'label3',
    label4: 'label11',
  },

  {
    label: 'label1',
    label1: 'label1',
    label2: 'label2',
    label3: 'label3',
    label4: 'label11',
  },

  {
    label: 'label12222',
    label1: 'label1',
    label2: 'label2',
    label3: 'label3',
    label4: 'label11',
  },

  {
    label: 'label1',
    label1: 'label1',
    label2: 'label2',
    label3: 'label3',
    label4: 'label11',
  },

  {
    label: 'label1',
    label1: 'label1',
    label2: 'label2',
    label3: 'label3',
    label4: 'label11',
  },

  {
    label: 'label12222',
    label1: 'label1',
    label2: 'label2',
    label3: 'label3',
    label4: 'label11',
  },
])

const height = ref(300)
setTimeout(() => {
  height.value = 400
  data.value  = data.value.slice(0,3)
}, 5000)

const onCurrentChange = (val:number)=>{
  console.log(val)
}

const page = ref({small:true,background:true,pageSize:20,total:100,onCurrentChange})
</script>
<template>
  <div>
    <SuitTable  
       :page="page"
       :table="{height,data}"
       :columns="columns as any"
    >
       <template #empty>empty</template>
    </SuitTable>
  </div>
</template>
<style lang="scss" scoped></style>
